<template>
    <div>
        <el-form :model="itemModel" :rules="rules" ref="itemModel" label-width="180px" label-position='right'>
            <el-form-item label="商品名称：" prop="name">
                <el-input v-model="itemModel.name" placeholder="请输入" clearable maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="平台类目：" prop="genera">
                <el-select v-model="itemModel.genera" placeholder="请选择" clearable>
                    <el-option v-for="item in generaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属商户：" prop="cate" v-if="passRole(['admin', 'lessee'])">
                <el-select v-model="itemModel.shop" placeholder="请选择" clearable>
                    <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="商品分类：" prop="cate">
                <el-select v-model="itemModel.cate" placeholder="请选择" clearable>
                    <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="排序：" prop="sort">
                <el-input v-model="itemModel.sort" placeholder="请输入" type="number"></el-input>
            </el-form-item>
            <el-form-item label="付款方式：" prop="payType">
                <el-radio v-model="itemModel.payType" :label='1'>在线支付</el-radio>
                <el-radio v-model="itemModel.payType" :label='2'>货到付款</el-radio>
                <el-radio v-model="itemModel.payType" :label='3'>价格面议</el-radio>
            </el-form-item>
            <el-form-item label="销售状态：" prop="status">
                <el-radio v-model="itemModel.status" :label=1>在售</el-radio>
                <el-radio v-model="itemModel.status" :label=0>下架</el-radio>
            </el-form-item>
            <el-form-item label="是否校验库存：" prop="isCheckStock">
                <el-radio v-model="itemModel.isCheckStock" :label=1>是</el-radio>
                <el-radio v-model="itemModel.isCheckStock" :label=0>否</el-radio>
            </el-form-item>
            
            <el-form-item label="消费赠送积分：" v-if="itemModel.activityKey == 'expenseSendIncomes'">
                <div>
                    <el-radio v-model="itemModel.expenseSendIncomesType" :label=1>按比例</el-radio>
                    <el-radio v-model="itemModel.expenseSendIncomesType" :label=2>固定金额</el-radio>
                    {{ $store.getters.lessee.incomesToBalanceRate }}
                    <div style="color: #666;font-size: 12px;line-height: 20px;">系统当前设置积分兑换余额比例为{{ count.mul($store.getters.lessee.incomesToBalanceRate, 1) }} : 1，即{{count.mul($store.getters.lessee.incomesToBalanceRate, 1)}}积分可兑换1元。</div>
                    <div v-if="itemModel.expenseSendIncomesType == 1">
                        <div style="color: #666;font-size: 12px;line-height: 20px;">按照商品销售价的百分比赠送等价值的积分。填0.01，即%1，用户消费100元，则赠送1块价值的积分，如果积分兑换比例为100:1， 那么会赠送100积分。</div>
                        <el-input v-model="itemModel.expenseSendIncomes" type="number"></el-input>
                    </div>
                    <div v-if="itemModel.expenseSendIncomesType == 2">
                        <div style="color: #666;font-size: 12px;line-height: 20px;">赠送固定数量的积分</div>
                        <el-input v-model="itemModel.expenseSendIncomes" type="number"></el-input>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="推荐赠送积分：" v-if="itemModel.activityKey == 'directSendIncomes'">
                <div>
                    <el-radio v-model="itemModel.directSendIncomesType" :label=1>按比例</el-radio>
                    <el-radio v-model="itemModel.directSendIncomesType" :label=2>固定金额</el-radio>
                    <div style="color: #666;font-size: 12px;line-height: 20px;">系统当前设置积分兑换余额比例为{{ count.mul($store.getters.lessee.incomesToBalanceRate, 1) }} : 1，即{{count.mul($store.getters.lessee.incomesToBalanceRate, 1)}}积分可兑换1元。</div>
                    <div v-if="itemModel.directSendIncomesType == 1">
                        <div style="color: #666;font-size: 12px;line-height: 20px;">按照商品销售价的百分比赠送等价值的积分。填0.01，即%1，用户消费100元，则赠送1块价值的积分，如果积分兑换比例为100:1， 那么会赠送100积分。</div>
                        <el-input v-model="itemModel.directSendIncomes" type="number"></el-input>
                    </div>
                    <div v-if="itemModel.directSendIncomesType == 2">
                        <div style="color: #666;font-size: 12px;line-height: 20px;">赠送固定数量的积分</div>
                        <el-input v-model="itemModel.directSendIncomes" type="number"></el-input>
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="规格类型：" prop="isSingleSpec">
                <!-- <el-radio v-model="itemModel.isSingleSpec" :label=1 @input="radioChange">单规格</el-radio> -->
                <el-radio v-model="itemModel.isSingleSpec" :label=0 @input="radioChange">多规格</el-radio>
            </el-form-item>
        </el-form>
        <!-- 单规格 -->
        <el-form :model="itemModel" :rules="rules" label-width="130px" label-position='right'
            v-if="itemModel.isSingleSpec == 1">

            <el-table :data="skuList" size='medium' style="margin-top:20px" border>
                <el-table-column v-for="(item, index) in skuSpecList" :key='index' prop="specList" :label="item"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <label>{{ scope.row.specList[index].name }}</label>
                    </template>
                </el-table-column>
                <el-table-column prop="coverUrl" label="sku图片" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <jcupload :flag="scope.$index" :fileUrl='scope.row.coverUrl' :model="scope.row"
                            :fileList='scope.row.coverPhotoList' @handleFileSuccessForOne='handleCoverSuccess'
                            filePath='item/cover/'></jcupload>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" type="number" style="width: 120px;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存(必填)" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.stock" style="width: 120px;"
                                type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.stockError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="costPrice" label="成本价(必填)" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.costPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sellingPrice" label="销售价(必填)" show-overflow-tooltip align="center" width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.sellingPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.sellingPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="incomesPrice" label="所需积分(必填)" show-overflow-tooltip align="center" width="180px" v-if="itemModel.activityKey == 'incomesDeduction'">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.incomesPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.incomesPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <!-- 多规格 -->
        <el-form :model="itemModel" :rules="rules" label-width="130px" label-position='right'
            v-if="itemModel.isSingleSpec == 0">
            <el-form-item label="商品规格：" prop="skuList">
                <div style="color: #666;font-size: 12px;">最多添加5个商品规格类型</div>
                <div style="border: 1px solid #eee;padding: 10px;">
                    <div v-for="(item, index) in specList" :key="index" style="margin-bottom: 20px;">
                        <div style="display: flex;flex-direction: row;justify-content: space-between;">
                            <div style="display: flex;flex-direction: column;position: relative;">
                                <el-input v-model="item.specName" clearable style="width: 150px;" placeholder="请输入规格类型"
                                    @blur="blurSpecTypeAction(index)"></el-input>
                                <label style="color: red;font-size: 12px;" class="label">{{ item.specTypeError
                                    }}</label>
                            </div>
                            <el-button type="text" size="mini" @click="delSpecType(item, index)">删除规格类型</el-button>
                        </div>
                        <div style="height: 1px;background-color: #eee;margin: 10px 0;"></div>
                        <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                            <div v-for="(spec, idx) in item.specValueList" :key="idx"
                                style="margin-right: 10px;margin-bottom: 10px;display: flex;flex-direction: row;align-items: center;">
                                <div style="display: flex;flex-direction: column;position: relative;">
                                    <el-input v-model="spec.name" clearable style="width: 180px;" placeholder="请输入规格名称"
                                        @blur="blurSpecAction(index, idx)"></el-input>
                                    <label style="color: red;font-size: 12px;" class="label">{{ item.specError
                                        }}</label>
                                </div>
                                <el-button type="text" size="mini" style="margin-left: 10px;"
                                    @click="delSpec(spec, index, idx)">删除</el-button>
                            </div>
                            <el-button type="text" icon="el-icon-plus" @click="addSpec(index)" size="mini"
                                style="margin-bottom: 10px;">添加规格值</el-button>
                        </div>
                        <div style="height: 5px;background-color: #efefef;margin: 10px 0;"
                            v-if="specList && index != specList.length - 1"></div>
                    </div>
                    <el-button type="text" icon="el-icon-plus"
                        v-if="specList && specList.length <= 4"
                        @click="addSpecType">添加规格类型</el-button>
                </div>

            </el-form-item>

            <!-- 营销设置 -->
            <el-form-item label="功能分类：" prop="activity">
                <el-select v-model="itemModel.activity" placeholder="请选择" clearable @change="activityChange">
                    <el-option v-for="item in activityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批量设置：" prop="">
                <div style="display: flex;flex-direction: row;align-items: center;" v-if="skuList.length > 0">
                    <div style="font-size: 14px;margin-left: 10px;">库存</div>
                    <el-input style="margin-left: 10px;width: 120px;" v-model="setSkuData.stock" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;">销售价</div>
                    <el-input style="margin-left: 10px;width: 120px;" v-model="setSkuData.sellingPrice" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;">成本</div>
                    <el-input style="margin-left: 10px;width: 120px;" v-model="setSkuData.costPrice" type="number"></el-input>
                    <div style="margin-left: 10px;"><el-button @click="setAllSkuData">批量填充</el-button></div>
                </div>
            </el-form-item>
            <!-- <el-form-item label="利润计算：" prop="" v-if="skuList.length > 0" >
                <div style="display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">赠送锁仓积分</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.selfSendIncomesLockedRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">直推赠送购物积分</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.verticalSendIncomesRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">日分红</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.dayAwardRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">运营补贴</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.operationAwardRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">月分红</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.monthAwardRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">供应链奖励</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.supplyAwardRate" type="number"></el-input>
                    <div style="font-size: 14px;margin-left: 10px;flex-shrink: 0;margin-bottom: 8px;">助残基金</div>
                    <el-input style="margin-left: 10px;width: 120px;margin-bottom: 8px;" v-model="activityParamsObj.helpFundRate" type="number"></el-input>
                    <div style="margin-left: 10px;"><el-button @click="countAllProfit">利润计算</el-button></div>
                </div>
            </el-form-item> -->

            <el-table :data="skuList" size='medium' style="margin-top:20px" border>
                <el-table-column v-for="(item, index) in skuSpecList" :key='index' prop="specList" :label="item"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <label>{{ scope.row.specList[index].name }}</label>
                    </template>
                </el-table-column>
                <!-- <el-table-column v-for="(item, index) in specList" :key='index' prop="specList" :label="item.specName" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <label>{{specList[index].specValueList[scope.$index]}}</label>
                    </template>
                </el-table-column> -->
                <el-table-column prop="coverUrl" label="sku图片" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <jcupload :flag="scope.$index" :fileUrl='scope.row.coverUrl' :model="scope.row"
                            :fileList='scope.row.coverPhotoList' @handleFileSuccessForOne='handleCoverSuccess'
                            filePath='item/cover/'></jcupload>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" type="number" style="width: 120px;"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存(必填)" show-overflow-tooltip align="center" width="150px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;position: relative;">
                            <el-input v-model="scope.row.stock" style="width: 120px;"
                                type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.stockError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sellingPrice" label="销售价(必填)" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.sellingPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.sellingPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="costPrice" label="成本价(必填)" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.costPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="discountPrice" label="折扣价" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.discountPrice" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.discountPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="selfSendIncomesLocked" label="赠送购物者锁仓积分" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.selfSendIncomesLocked" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="verticalSendIncomes" label="直推赠送购物积分" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.verticalSendIncomes" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dayAward" label="日分红" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.dayAward" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="operationAward" label="运营补贴" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.operationAward" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="monthAward" label="月分红" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.monthAward" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="supplyAwardRate" label="供应链奖励" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.supplyAward" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="helpFund" label="助残基金" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.helpFund" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="grossProfit" label="毛利润" show-overflow-tooltip align="center"
                    width="180px">
                    <template slot-scope="scope">
                        <div style="display: flex;flex-direction: column;align-items: flex-start;">
                            <el-input v-model="scope.row.grossProfit" style="width: 140px;" type="number"></el-input>
                            <label style="color: red;font-size: 12px;">{{ scope.row.costPriceError }}</label>
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>
        </el-form>
    </div>

</template>
<script>
import {
    findCateList
} from '@/api/merchant/cate.js'
import {
    findGeneraList
} from '@/api/merchant/genera.js'
import {
    findShopList
} from '@/api/merchant/shop.js'
import {
    findActivityList
} from '@/api/merchant/activity.js'
import uploadList from '@/components/jcupload/list'
import jcupload from '@/components/jcupload/index'
export default {
    components: { uploadList, jcupload },
    props: {
        itemModel: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            activityOptions: [],
            brandList: [],
            merchantList: [],
            tagList: [{ id: 1, name: "热卖" }, { id: 2, name: "新品" }],
            rules: {
                name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }]
            },
            userModel: {},
            selectItemSpecList: [],
            checkedSelectSpec: [],
            skuSpecList: [],
            skuList: [],
            skuList_old: [],
            specList: [],
            setSkuData: {
                costPrice: '',
                sellingPrice: ''
            },
            allSellingPrice: '',
            allMarketPrice: '',
            lastSpecList: [],
            lastSkuList: [],
            lastSkuSpecList: [],
            cateValueState: '',
            generaList: [],
            cateList: [],
            shopList: [],
            activityList: [],
            activityId: '',
            activityParamsObj: {},
        }
    },
    created() {
        this.userModel = this.$store.state.user.userModel
        if(!this.itemModel.id){
            this.radioChange(0)
        }
        this.findGeneraList()
        this.findCateList()
        this.findShopList()
        this.findActivityList()
    },
    methods: {
        countAllProfit(){
            this.request_post('pay/order/countProfit/', {skuList: this.skuList, activityId: this.activityId}).then(res => {
              if (res.data.code == 10000) {
                this.skuList = res.data.data.skuList
              }
            });
        },
        findShopList() {
            findShopList().then(res => {
                if (res.data.code == 10000) {
                    this.shopList = res.data.data.list
                }
            });
        },
        findGeneraList(){
            findGeneraList().then(res => {
                if (res.data.code == 10000) {
                    this.generaList = res.data.data.list
                }
            });
        },
        findCateList() {
            findCateList().then(res => {
                if (res.data.code == 10000) {
                    this.cateList = res.data.data.list
                }
            });
        },
        findActivityList() {
            findActivityList().then(res => {
                if (res.data.code == 10000) {
                    this.activityList = res.data.data.list
                }
            });
        },
        activityChange(val){
            var _list = this.activityList.filter(item=>item.id==val)
            if(_list.length>0){
                this.activityId = _list[0].id
                this.activityParamsObj = _list[0].activityParamsObj
                this.itemModel.activityKey = _list[0].key
            }
        },
        delSpecType(item, index) {
            this.specList.splice(index, 1)
            this.getSkuData(this.specList)
        },
        delSpec(item, index, idx) {
            var specValue = this.specList[index]
            specValue.specValueList.splice(idx, 1)
            this.getSkuData(this.specList)
        },
        addSpecType() {
            this.specList.push({
                specName: '',
                specValueList: [{ specName: '', name: '' }]
            })
            this.getSkuData(this.specList)
        },
        addSpec(index) {
            var specValue = this.specList[index]
            specValue.specValueList.push({ specName: '', name: '' })
            this.getSkuData(this.specList)
        },
        blurSpecTypeAction(index) {
            var specValue = this.specList[index]
            for (var item of specValue.specValueList) {
                item.specName = specValue.specName
            }
            this.skuSpecList = this.getSelectSpecName(this.specList)//获取规格名称列表
            var skuList = this.getSkuList(this.specList)//获取被选中的规格值列表
            this.skuList.forEach((sku, index) => {
                sku.specList = skuList[index].specList
                sku.specValues = skuList[index].specValues
            })
            // console.log('this.skuList--', this.skuList)
        },
        blurSpecAction(index, idx) {
            var specValue = this.specList[index]
            for (var item of specValue.specValueList) {
                item.specName = specValue.specName
            }
            this.skuSpecList = this.getSelectSpecName(this.specList)//获取规格名称列表
            var skuList = this.getSkuList(this.specList)//获取被选中的规格值列表
            this.skuList.forEach((sku, index) => {
                sku.specList = skuList[index].specList
                sku.specValues = skuList[index].specValues
            })
            // console.log('this.skuList--', this.skuList)
        },
        //获取sku列表
        findSpecList(skuList) {
            //组装规格名称
            var valueList = []
            var specNames = new Set()
            for (var item of skuList) {
                for (var value of JSON.parse(item.specValues)) {
                    specNames.add(value.specName)
                    valueList.push(value)
                }
            }
            //组装规格
            var specList = []
            var specs_sel = ''
            for (var specName of specNames) {
                var sku = {}
                var specSet = new Set()
                for (var item of valueList) {
                    if (specName == item.specName) {
                        specSet.add(item.name)
                    }
                }
                sku.specName = specName
                //组装规格值
                var specListTemp = Array.from(specSet)
                var specValueList = []
                for (var i in specListTemp) {
                    var name = specListTemp[i]
                    var spec = {}
                    spec.specName = specName
                    spec.name = name
                    specValueList.push(spec)
                }
                sku.specValueList = specValueList
                specList.push(sku)
            }this.specList = specList
            this.$set(this.itemModel, 'specList', specList)
            // console.log('计算specList', this.itemModel)
        },
        // 单选多选切换
        radioChange(e) {
            if (e == 1) {
                this.lastSpecList = JSON.parse(JSON.stringify(this.specList))
                this.lastSkuList = JSON.parse(JSON.stringify(this.skuList))
                this.lastSkuSpecList = JSON.parse(JSON.stringify(this.skuSpecList))
                var selectItemSpecList = [{ specName: '规格', specValueList: [{ specName: '规格', name: '默认' }] }]
                this.getSkuData(selectItemSpecList)
            } else {
                this.specList = this.lastSpecList
                this.skuList = this.lastSkuList
                this.skuSpecList = this.lastSkuSpecList
            }
        },
        prPriceChange(e) {
            this.itemModel.sellingPrice = e
            for (var item of this.skuList) {
                if (item.value > 0) {
                    this.$set(item, 'sellingPrice', this.count.mul(item.value, this.itemModel.sellingPrice))
                }
            }
        },
        skuValueChange(row) {
            if (this.itemModel.sellingPrice > 0) {
                this.$set(row, 'sellingPrice', this.count.mul(row.value, this.itemModel.sellingPrice))
            }
        },
        setAllSkuData() {
            for (var item of this.skuList) {
                for (var key of Object.keys(this.setSkuData)) {
                    if (this.setSkuData[key] != '' && this.setSkuData[key] > 0) {
                        this.$set(item, key, this.setSkuData[key])
                    }
                }
                // item.sellingPrice = this.allSellingPrice
            }
        },
        setAllMarketPrice() {
            for (var item of this.skuList) {
                item.marketPrice = this.allMarketPrice
            }
        },
        //选择规格回调方法
        didSelectItemSpec(e) {
            this.selectItemSpecList = e
            this.getSkuData(this.selectItemSpecList)
        },
        checkboxChange(e) {
            e.selected = !e.selected
            this.getSkuData(this.selectItemSpecList)
        },
        getSkuData(selectItemSpecList) {
            this.skuSpecList = this.getSelectSpecName(selectItemSpecList)//获取规格名称列表
            this.skuList = this.getSkuList(selectItemSpecList)//获取被选中的规格值列表
            // 计算skuList之前，将旧的sku值赋值给新的
            this.skuList.forEach((sku, index, skuList) => {
                for (var old of this.skuList_old) {
                    if (sku.specValues == old.specValues) {
                        skuList[index] = old
                    }
                }
            })
        },
        //获取规格名称列表
        getSelectSpecName(selectItemSpecList) {
            var skuSpecList = []
            for (var item of selectItemSpecList) {
                if (item.specValueList.length == 0) {
                    continue
                }
                skuSpecList.push(item.specName)
            }
            // console.log('skuSpecList', skuSpecList)
            return skuSpecList
        },
        //获取被选中的规格值列表
        getSkuList(selectItemSpecList) {
            //首先获取被选中的规格值的列表
            var list = []
            for (var item of selectItemSpecList) {
                var valuesList = []
                for (var value of item.specValueList) {
                    valuesList.push(value)
                }
                if (valuesList.length > 0) {
                    list.push(valuesList)
                }
            }
            if (list.length == 0) return []
            //用笛卡尔积算法计算出所有组合
            list = this.calcDescartes(list)
            //组装所有sku的数据
            var skuList = []
            for (var item of list) {
                var skuItem = {}
                var specList = JSON.parse(JSON.stringify(item))
                for (var spec of specList) {
                    delete spec.selected
                }
                skuItem.specValues = JSON.stringify(specList)
                skuItem.specList = item
                //初始化这两个价格
                skuItem.sellingPrice = ''
                skuItem.value = 0
                skuList.push(skuItem)
            }
            // console.log('skuList', skuList)
            return skuList
        },
        //笛卡尔积算法
        calcDescartes(array) {
            if (array.length < 2) {
                var list = []
                for (var item of array[0]) {
                    list.push([item])
                }
                return list
            }
            return array.reduce((total, currentValue) => {
                let res = [];
                total.forEach(t => {
                    currentValue.forEach(cv => {
                        if (t instanceof Array) 	// 或者使用 Array.isArray(t)
                            res.push([...t, cv]);
                        else
                            res.push([t, cv]);
                    })
                })
                return res;
            })
        },
        //ske图片上传成功
        handleCoverSuccess(e) {
            // var sku = this.skuList[e.flag]
            // sku.cover = e.url

        },
        //子组件校验，传递到父组件
        validateForm() {
            // console.log('this.itemModel1', this.itemModel)
            var flag = false
            this.$refs['itemModel'].validate(valid => {
                if (valid) {
                    if (!this.itemModel.genera) {
                        this.$message.error('请选择平台类目');
                    } else if (this.itemModel.isSingleSpec != 1 && this.skuList.length < 1) {
                        this.$message.error('请选择商品规格');
                    } else {
                        flag = true
                        // for (var item of this.specList) {
                        //     if (!item.specName) {
                        //         this.$message.error('规格类型不能为空');
                        //         this.$set(item, 'specTypeError', '请输入')
                        //         flag = false
                        //     }
                        //     for (var spec of item.specValueList) {
                        //         if (!spec.name) {
                        //             this.$message.error('规格值不能为空');
                        //             this.$set(item, 'specError', '请输入')
                        //             flag = false
                        //         }
                        //     }
                        // }
                        for (var item of this.skuList) {
                            if(!item.stock){
                                item.stock = 0
                            }
                            if(!item.sellingPrice){
                                item.sellingPrice = 0
                            }
                            if(!item.incomesPrice){
                                item.incomesPrice = 0
                            }
                        }
                        this.itemModel.skuList = this.skuList
                    }
                } else {
                    flag = false
                }
            })
            return flag
        },
        //选择标签
        tagChange(e) {

        }
    },
}
</script>
<style lang='scss' scoped>
.label {
    position: absolute;
    bottom: -20px;
}
</style>